<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '地址管理',
  },
}
</route>

<template>
  <!-- 导航栏 -->
  <customHeader title="地址管理"></customHeader>

  <!-- 地址管理 -->
  <view class="address bg-white color-base position-relative flex-1 px-32rpx">
    <!-- 请选择收货地址 -->
    <view>
      <view class="font-size-28rpx mt-32rpx">请选择收货地址</view>
      <view
        v-for="(ares, index) in state.addressData"
        :key="index"
        class="addressList flex justify-between items-center mt-28rpx pb-32rpx position-relative"
      >
        <!-- 选中状态 -->
        <view
          :class="[ares.default ? 'aBox' : 'dBox', 'activeBox']"
          class="flex justify-center items-center"
          @click="toChangeActive(ares)"
        >
          <view class="activeView"></view>
        </view>
        <!-- 地址 -->
        <view class="w-546rpx ml-20rpx mr-46rpx">
          <view class="flex color-base font-size-32rpx">
            <view class="font-bold">{{ ares.titile }} {{ ares.number }}</view>
            <view
              class="delHot font-size-26rpx w-72rpx h-40rpx font-400 text-center color-white"
              v-show="ares.default"
            >
              默认
            </view>
          </view>
          <view class="color-gray font-size-28rpx">
            {{ ares.msg }}
          </view>
        </view>
        <!-- 编辑 -->
        <view class="">
          <wd-icon name="edit-1" size="22px" color="#CDCED0" @click="toAddLocation(ares)"></wd-icon>
        </view>

        <!-- 分割线 -->
        <view class="fgxBr"></view>
      </view>
    </view>

    <!-- 不可用地址 -->
    <view class="mt-42rpx">
      <view class="font-size-28rpx" style="color: #858788">以下地址超出可配送范围</view>

      <view
        v-for="(ares, index) in state.addressData"
        :key="index"
        class="addressList flex justify-between items-center mt-28rpx pb-32rpx position-relative"
      >
        <!-- 选中状态 -->
        <view style="opacity: 0" :class="[ares.default ? 'aBox' : 'dBox', 'activeBox']">
          <view class="activeView"></view>
        </view>
        <!-- 地址 -->
        <view class="w-546rpx ml-20rpx mr-46rpx">
          <view class="flex font-size-32rpx" style="color: #858788">
            <view class="font-bold">{{ ares.titile }} {{ ares.number }}</view>
          </view>
          <view class="font-size-28rpx" style="color: #858788">
            {{ ares.msg }}
          </view>
        </view>
        <!-- 编辑 -->
        <view class="">
          <wd-icon name="edit-1" size="22px" color="#CDCED0" @click="toAddLocation(ares)"></wd-icon>
        </view>

        <!-- 分割线 -->
        <view class="fgxBr"></view>
      </view>
    </view>
  </view>

  <!-- 缺省页 -->
  <customExpect
    v-if="state.addressData.length === 0"
    style="flex: 1"
    :title="'您还没有常用地址，去添加一个吧'"
    :icon="'/static/default/comingAress.png'"
  ></customExpect>

  <!-- 新增按钮 -->
  <view
    @click="toAddLocation"
    class="addButton w-590rpx h-80rpx line-height-80rpx text-center font-size-36rpx color-white bg-primary"
  >
    新增地址
  </view>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  reactive,
  toRefs,
} from 'vue'

// reactive声明响应式数据，用于声明引用数据类型
const state = reactive({
  addressData: [
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: true,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
  ],
})

// onMounted
onMounted(() => {
  console.log('onMounted')
})

// 跳转新增地址
const toAddLocation = (query) => {
  uni.navigateTo({
    url: `addLocation?query=${JSON.stringify(query)}`,
  })
}

// 设置默认地址
const toChangeActive = (data) => {
  state.addressData.forEach((value) => {
    value.default = false
  })
  data.default = true
}
</script>

<style lang="scss">
.addButton {
  position: fixed;
  right: 0;
  bottom: 66rpx;
  left: 0;
  z-index: 999;
  display: block;
  margin: 0 auto;
  border-radius: 40rpx;
}

.address {
  margin-bottom: 240rpx;
  .activeBox {
    width: 36rpx;
    height: 36rpx;
    border: 2rpx solid #dadada;
    border-radius: 100%;
    .activeView {
      width: 20rpx;
      height: 20rpx;
      background: #fff;
      border-radius: 100%;
    }
  }
  .aBox {
    border-color: #9ee5c8;
    .activeView {
      background-color: #00b96d;
    }
  }
  .dBox {
    border-color: #dadada;
    .activeView {
      background-color: #fff;
    }
  }

  .fgxBr {
    position: absolute;
    bottom: 0rpx;
    left: 30rpx;
    width: 608rpx;
    border-bottom: 1px solid #dedede;
  }

  .delHot {
    height: 40rpx;
    margin-left: 10rpx;
    line-height: 40rpx;
    color: #3fb674;
    background: #e2f4ea;
    border-radius: 4rpx;
  }
}
</style>
